<template>
    <div class="VerticalDrawable" :style="heightStyle" ref="drawer">
      <el-dialog title='请选择交通方式' :visible.sync="dialogFormVisible" width="300px">
          <el-form :model="form">
            <el-form-item label="交通方式:">
              <el-select v-model="form.transportMode" clearable placeholder="请选择"  @change="handleTransportChange">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="showSecondFormItem" label="预估费用：">
              <template v-if="form.transportMode !== 4 && form.transportMode !== 5">
                <el-input v-model="secondFormValue" placeholder="请输入"></el-input>
              </template>
              <template v-else>
                <el-select v-model="secondFormValue" placeholder="请选择">
                  <el-option v-for="option in secondFormOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="collectTransportInf">确 定</el-button>
          </div>
      </el-dialog>
      <div class="tip">
        <div class="tipLable">{{ title }}</div>
        <div class="upLable" @click="openDrawable">——</div>
        <div class="pickUpLable" @click="pickUp"><img src="~/assets/img/home/chouTi/收起.svg" alt=""></div>
      </div>
      <div class="listview">
        <scroll class="content"
                ref="scroll">
          <choose-item v-for="(item) in regionArr" :key="($store.state.cityInf[item] && $store.state.cityInf[item].id) || ($store.state.scenicInf[item] && $store.state.scenicInf[item].id)" :region="item" :layer="layer"></choose-item>
        </scroll>
      </div>
    </div>
  </template>

<script>
import chooseItem from './chooseItem.vue'
import scroll from '@/components/common/scroll/Scroll.vue'

let oldLayer = 1
let city
let province

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Drawer',
  components: {
    chooseItem,
    scroll
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    region: {
      type: String,
      default: () => {
        return ''
      }
    },
    layer: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data () {
    return {
      // 交通弹窗
      dialogFormVisible: false,
      form: {
          transportMode: '',
          transportPrice: '',
        },
      showSecondFormItem: false,
      secondFormOptions: [],
      secondFormValue: '',
      formData: {
        transport: '',
        secondFormItem: ''
      },
      options: [{
        value: 0,
        label: '步行'
      }, 
      {
        value: 1,
        label: '骑行'
      }, {
        value: 2,
        label: '驾车'
      },
      {
        value: 3,
        label: '地铁'
      },
      {
        value: 4,
        label: '铁路'
      },
      {
        value: 5,
        label: '飞机'
      }],
      formLabelWidth: '100px',
      title: '',
      key: '', // 用于记录遍历所用的唯一标识
      firstLayerRegionArr: [], // 记录第一层被点击过的地名，即省份
      secondLayerRegionObj: {}, // 记录第二层被点击过的地名，即城市(按省份分类)
      secondLayerRegionArr: [], // 记录第二层被点击过的所有城市
      thirdLayerRegionObj: {}, // 记录第三层被点击过的地名，即景点(按城市分类)
      thirdLayerRegionArr: [], // 记录第三层被点击过的所有景点
      regionArr: [], // 记录展示的地点
      oldRegion: '', // 记录上一层的地点
      isToped: true, // 判断列表的第一个元素是否位于顶部
      isScollToTop: true, // true 向顶部滑动
      defaultHeight: 46, // 记录默认高度 %
      currentHeight: 46, // 记录当前窗体高度%
      window: {
        startHeight: 46,
        endHeight: 82
      },
      startPos: {
        y: 0
      },
      endPos: {
        y: 0
      }
    }
  },
  computed: {
    heightStyle () {
      return {
        height: this.currentHeight + '%'
      }
    }
  },
  created () {
  },
  mounted () {
    // this.handleTounchListener()
  },
  methods: {
    handleTransportChange() {
      this.showSecondFormItem = true;
      this.secondFormValue = '';

      switch (this.formData.transport) {
        case 4:
          this.secondFormLabel = '铁路线路';
          this.secondFormOptions = [
            { label: '北京-上海', value: '北京-上海' },
            { label: '广州-深圳', value: '广州-深圳' },
            { label: '成都-重庆', value: '成都-重庆' }
            // 添加更多铁路线路数据
          ];
          break;
        case 5:
          this.secondFormLabel = '航班';
          this.secondFormOptions = [
            { label: 'CA123', value: 'CA123' },
            { label: 'MU456', value: 'MU456' },
            { label: 'CZ789', value: 'CZ789' }
            // 添加更多航班数据
          ];
          break;
        default:
          this.showSecondFormItem = false;
          break;
      }
    },
    // 收集交通信息
    collectTransportInf(){
      this.$store.commit('saveScenicArray',this.form)
      this.dialogFormVisible = false
      this.form.transportMode = ''
      this.form.transportPrice = ''
    },
    // 收起抽屉展示
    pickUp () {
      this.$emit('onPickUp', false)
    },
    openDrawable () {
      // 60Hz, 16.6ms
      const id = setInterval(() => {
        if (this.isScollToTop) {
          this.isScollToTop = false
          this.currentHeight = this.window.endHeight
          clearInterval(id)
        } else {
          this.currentHeight = this.window.startHeight
          this.isScollToTop = true
          clearInterval(id)
        }
      }, 10)
    },
    onListScrolled (event) {
      const top = event.target.scrollTop
      this.isToped = top === 0
    }
  },
  watch: {
    region (newVal, oldValue) {
      switch (this.layer) {
        case 1:// 在第三层点击不是景点的区域进入后
          this.regionArr = this.firstLayerRegionArr// 展示卡片数组修改为所有省份数组s
          this.title = '已选择的省份或直辖市'
          oldLayer = 1
          break
        case 2:// 从第一层点击省份进入后
          province = newVal
          // 存储省份数据
          this.$store.dispatch('getCityInf', province)
          oldLayer = 2
          // console.log(2);
          this.regionArr = this.secondLayerRegionObj[province]// 展示卡片数组修改为该省份的城市数组
          // console.log('-------');
          // console.log(this.secondLayerRegionObj[province]);
          this.title = '已选择的城市'
          if (this.firstLayerRegionArr.includes(province)) break// 若所有省份数组已包含该省份则直接跳过，不包含进入else
          else {
            this.firstLayerRegionArr.unshift(province)// 将该省份添加进所有省份数组
            // console.log(province);
            this.secondLayerRegionObj[province] = []// 添加属于该省份的城市数组
            // console.log(this.secondLayerRegionObj[province]);
            break
          }
        case 3:
          this.regionArr = this.thirdLayerRegionObj[city]// 展示卡片数组修改为该直辖市的景点数组
          // console.log(3);
          // console.log(oldLayer);
          this.title = '已选择的景点'
          // console.log(this.thirdLayerRegionObj);
          if (oldLayer === 2) { // 从第二层点击城市进入后
            city = newVal
            // console.log(city);
            if (!this.secondLayerRegionArr.includes(newVal)) { // 如果所有城市数组不包含该城市
              this.$store.dispatch('getCityInf', city)// vuex存储城市数据
              this.secondLayerRegionArr.unshift(newVal)// 添加进所有城市数组
              this.thirdLayerRegionObj[city] = []// 添加属于该城市的景点数组
              this.secondLayerRegionObj[province].push(city)// 把该城市添加进省份数组
              this.regionArr = this.thirdLayerRegionObj[city]// 展示卡片数组修改为该城市的景点数组
            }
            oldLayer = 3
          } else if (oldLayer === 1) { // 从第一层点击直辖市进入后
            city = newVal
            if (!this.firstLayerRegionArr.includes(newVal)) { // 如果省份数组不包含该直辖市
              this.$store.dispatch('getCityInf', city)// vuex存储城市数据
              this.firstLayerRegionArr.unshift(newVal)// 添加进省份数组
              this.thirdLayerRegionObj[city] = []// 添加属于该直辖市的景点数组
              this.regionArr = this.thirdLayerRegionObj[city]// 展示卡片数组修改为该直辖市的景点数组
            }
            oldLayer = 3
          } else { // 在第三层点击景点时
            if (!this.thirdLayerRegionArr.includes(newVal)) { // 如果所有景点数组不包含该景点
              this.dialogFormVisible = true
              this.$store.dispatch('getScenicInf', newVal)// vuex存储景点数据
              this.thirdLayerRegionArr.unshift(newVal)// 在所有景点数组中添加该景点
              this.thirdLayerRegionObj[city].push(newVal)// 在其隶属的城市数组中添加该景点
              this.regionArr = this.thirdLayerRegionObj[city]// 展示卡片数组修改为该直辖市的景点数组
            }
          }
          break
      }
    }
  }
}
</script>

<style scoped>
  #button{
    z-index: 999999999999;
    height: 30px;
    width: 90px;
    display: block;
  }

  #button:active{
    background-color: red;
  }

  #button:hover{
    background-color: green;
    color: blue;
  }
  .VerticalDrawable {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: hidden;
    background: #f5f5f5c9;
    z-index: 999999;
    border-radius: 5px 5px 0 0;
    }
  /* 设置抽屉提示信息样式 */
  .tip {
    text-align: center;
    display: flex;
    height: 2rem;
    position: relative;
  }
  /* 设置 */
  .tipLable {
      flex: 1;
      padding-top: 5px;
      font-size: 14px;
  }
  .upLable {
      font-size: 20px;
      flex: 1;
      color: #999999;
      text-align: center;
  }
  /* 设置收起抽屉按钮样式 */
  .pickUpLable {
      height: 100%;
      width: 100%;
      flex: 1;
      /* padding: 5px; */
      text-align: right;
      padding-right: 1rem;
      padding-top: 0.25rem;
  }
  .pickUpLable img {
    height: 1rem;
    right: 0;
  }

  .listview{
    overflow: scroll;
  }

  /* 滚动内容区域样式 */
  .content {
    /* height: 300px; */
    overflow: hidden;

    position: absolute;
    top: 2rem;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  </style>
